<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar title="文章详情" left-arrow @click-left="$router.back()" />
    <!-- 内容区域 -->
    <div style="padding: 0 20px">
      <h3 style="font-size: 20px; margin: 10px 0">{{ info.title }}</h3>

      <div class="author-info">
        <van-image
          round
          fit="cover"
          width="80"
          height="80"
          :src="info.aut_photo"
        />
        <div class="info">
          <div>{{ info.aut_name }}</div>
          <span>{{ info.pubdate | relvTime }}</span>
        </div>
        <van-button type="info" round icon="plus">关注</van-button>
      </div>

      <!-- 文章内容 -->
      <div class="content" v-html="info.content"></div>

      <van-divider>end</van-divider>

      <div style="display: flex; justify-content: center">
        <van-button
          style="margin-right: 30px"
          plain
          round
          icon="good-job-o"
          type="primary"
          >点赞</van-button
        >
        <van-button plain round icon="delete-o" type="danger"
          >不喜欢</van-button
        >
      </div>
    </div>
    <!-- 评论区域 -->
    <comment />
  </div>
</template>

<script>
import comment from './comment'
export default {
  components: {

    comment
  },
  data() {
    return {
      info: {},
    };
  },
  async created() {
    let res = await this.$axios({
      url: "/v1_0/articles/" + this.$route.query.id,
    });

    this.info = res.data.data;
  },
};
</script>

<style scoped>
.author-info {
  display: flex;
  align-items: center;
  margin: 20px 0;
}
.info {
  margin-left: 20px;
  /* 使用剩余的宽度 */
  flex: 1;
}
.info div {
  font-size: 18px;
  margin-bottom: 5px;
}

.info span {
  color: gray;
}


::v-deep pre code {
  display: block;
  width: 100%;
  overflow: auto;
  background-color: #101010;
  color: #dcdcdc;
}


::v-deep .content img {
  width: 80%;
}
</style>